﻿@model HelloMinasan.Web.Song.ViewModels.BlankTestEntrie
@{
    ViewBag.Title = "Edit Blank";
}
<script src="@Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" />
<script>
    var testIdValue = @Model.TestId;
    var selectedList = new Array();
    Array.prototype.removeExistingValue = function (index) {
        this.splice(index, 1);
    }
    Array.prototype.addItem = function (item) {
        this.push(item);
    }

    function selectHidden(obj, position) {
        $(obj).addClass("selectedWord");
        $(obj).removeClass("mediumItem");
        $(obj).removeClass("easyItem");
        if (obj.title == "Normal") {
            $(obj).addClass("mediumItem");
            obj.title = "Hard";
            processData(obj, position);
        }
        else
            if (obj.title == "Hard") {
                $(obj).addClass("easyItem");
                processData(obj, position);
                obj.title = "Easy";
                processData(obj, position);
            }
            else {
                processData(obj, position);
                obj.title = "Normal";
                $(obj).removeClass("selectedWord");
            }


    }

    function processData(obj, position) {
        var index = checkExist(position + "#" + obj.title);
        if (index != -1) {
            selectedList.removeExistingValue(index);
        }
        else {
            selectedList.addItem(position + "#" + obj.title);
        }
    }

    function checkExist(str) {
        for (var i = 0; i < selectedList.length; i++) {
            if (selectedList[i] == str)
                return i;
        }
        return -1;
    }
    function saveBlankTest(sId) {
        $.ajax(
        {
            type: "POST",
            url: "/Song/EditBlank",
            data: { testId: testIdValue, songId: sId, positions: JSON.stringify(selectedList).toString() },
            success: function (result) {
                if (result.Result) {
                    window.open(result.Message, "_self");
                }
                else {
                    $.msgbox(result.Message, { type: "error" });
                }
            }
        });
    }
</script>
@Html.HiddenFor(x => x.SongId)
<div class="contentSectionInside">
    @*@if (Model.Song.LyricDetails.Where(x => x.IsOrginal).FirstOrDefault().LyricStatus)*@
    @*TODO: TEMPORARY, always allow to make blank test. need to check if Admin already approve or not*@
    @if(true) 
    {
        <div class="contentSection" align="left" style="margin-top: 5px;">
            <div class="contentSectionInside">
                <h3>Please select the words that you want to be hidden:</h3>
                @for (int i = 0; i < Model.ProcessedLyric.Count; i++)
                {
                    if (Model.ProcessedLyric[i] == "." || Model.ProcessedLyric[i] == "," || Model.ProcessedLyric[i] == "!" || Model.ProcessedLyric[i] == "?")
                    {
                    <span>@Model.ProcessedLyric[i]</span>
                    }
                    else
                        if (Model.ProcessedLyric[i] != "<br>" && !string.IsNullOrEmpty(Model.ProcessedLyric[i]))
                        {
                    <a class="selectionWord" title="Normal" onclick="selectHidden(this, @i)">@Model.ProcessedLyric[i]</a>
                        }

                        else
                        {
                    <br />
                        }
                }
                <div>
                    <span class="commandIcon" onclick="saveBlankTest(@Model.SongId)">
                        <div>Save my selections</div>
                        <img src="@Url.Content("~/Content/Images/saveTooltip.png")" width="30" />
                    </span>
                </div>
            </div>
        </div>
    }
    else
    {
        <text> This song's orginal lyric is not approved. So you can't create test for this song.</text>
    }
</div>
